// 字母排序
import { Component, Vue } from 'vue-property-decorator'
import pinyin from 'js-pinyin'

interface sectionInterface {
  title: string,
  value: object
}

@Component({
})
export default class extends Vue {
  list: string[] = 'ABCDEFGHJKLMNOPQRSTUVWXYZ'.split('')
  section: any = []
  async mounted() {
    const {status, data} = await this['$axios'].get('/geo/city')
    // [ {title: 'A', value: []},]
    let vals = {}
    let section: sectionInterface[] = []
    data.forEach((item: any) => {
      let p = pinyin.getFullChars(item.name).slice(0,1);
      vals[p] = vals[p] ? [...vals[p], item.name] : [item.name]
    });
    for (const [k,v] of Object['entries'](vals)) {
      section.push({title: k, value: v})
    }
    section.sort((a,b) => {return a.title.charCodeAt(0) - b.title.charCodeAt(0) })
    this.section = section
  }
  toIndex(item: string) {
    this.$store.dispatch('geo/setCity', item)
    this.$router.push('/')
  }
}